<template>
    <el-dialog v-model="visible" title="添加学生" width="60%" align-center >
            <el-form  :model="student" label-width="80px">
        <el-form-item label="姓名">
        <el-input v-model="student.username" placeholder="请输入姓名" />
        </el-form-item>

        <el-form-item label="手机号">
        <el-input v-model="student.telphone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="student.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱">
        <el-input v-model="student.email" placeholder="请输入邮箱" />
        </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">返回</el-button>
        <el-button type="primary" @click="saveUser">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref,reactive,watch,onMounted,defineEmits} from 'vue'
import userApi from '@/api/student/student.js'
const emit = defineEmits(['editVisible'])
let props=defineProps({
    visibleModel:{
        type:Boolean,
        default:false
    },
    id:{
        type:Number,
        default:0
    }
 })
 let visible=ref(props.visibleModel);
 watch(visible,(newVal) => {
      console.log(newVal);
      emit('editVisible');
    }
   )
 let student=ref({
    id:"",
    username:"",
    sex:"1",
    telphone:"",
    password:"",
    email:""
   });
   onMounted(()=>{
    userApi.getOne(props.id).then(response=>{
      console.log(response);
      student.value.id=response.data.data.id;
      student.value.username=response.data.data.username;
      student.value.sex=response.data.data.sex;
      student.value.telphone=response.data.data.telphone;
      student.value.email=response.data.data.email
    })
   })
  const saveUser=()=>{
     console.log(student);
     userApi.updateStudent(student.value).then(response=>{
      console.log(response);
      if(response.data.code==20000){
        visible.value=false;
        location.reload(true);
      }
    })
   }
   const close=()=>{
    //props.visibleModel.value=false;
    visible.value=false;
    console.log( props.visibleModel);
   }
</script>
<style scoped>

</style>
